<template>
	<div
		class="w-full rounded-[10px] relative mx-auto"
		:style="{
			width: isSelected ? screenWidth + 'px' : 'auto',
			maxWidth: !isSelected ? '1390px' : '100%'
		}">
		<div
			ref="screen_wrap"
			:class="`w-full overflow-hidden screen_wrap ${isDesktop ? 'bg-[#2a364f] flex pb-1' : 'flex flex-col'}`"
			:style="
				isDesktop
					? {
							height: isSelected ? 'calc(100vh - 110px)' : screenHeight + 'px'
						}
					: ''
			">
			<div
				:class="isDesktop ? 'w-[300px]' : 'order-2'"
				:style="isDesktop ? 'overflow-y: auto' : ''">
				<slot name="config"></slot>
			</div>
			<div
				:class="isDesktop ? '' : 'order-1'"
				:style="isDesktop ? 'width: calc(100% - 300px)' : `height: ${gameHeight}px`">
				<slot name="content"></slot>
			</div>
		</div>
		<game-footer
			@collect="handleCollect"
			@show-provably="handleProvably"
			@to-movie="handleMovie"
			@full-screen="handleFullScreen" />
		<FairnessDialog
			:showDialog="gameDetailStore.fairnessDialog"
			:gameType="gameType"
			@close="() => gameDetailStore.setFairnessDialog(false)" />
		<div class="h-group-t"></div>
		<Description :data="gameDetailStore.currentGameDetails" :winnerData="winnerData"></Description>
		<div class="h-group-t-xl"></div>
		<home-2up />
		<div class="h-group-t-xl"></div>
		<GameList type="provider" />
		<div class="h-group-t-xl"></div>
		<app-live-rank type="race" />
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useElementSize } from '@vueuse/core'
import Home2up from '@/views/casino/casino-home/home-2up.vue'
import GameList from '@/components/slots/game-list/index.vue'
import AppLiveRank from '@/components/app/app-live-rank/index.vue'
import GameFooter from '../game-footer/index.vue'
import FairnessDialog from '../dialog/fairness.vue'
import Description from '@/components/slots/games-content/description.vue'
import { getGameDetailWinner } from '@/api/other.ts'
import { isDesktop } from '@/hooks'
import router from '@/router'
import { useGameDetailStore } from '@/store'

const gameDetailStore = useGameDetailStore()
const screen_wrap = ref(null)
const isSelected = ref(false)
const winnerData = ref({})
const { width: screeWidth, height } = useElementSize(screen_wrap)

defineProps({
	gameType: {
		type: String,
		default: 'plinko'
	},
	gameHeight: {
		type: Number,
		default: 354
	}
})
onMounted(() => {
	gameDetailStore.setFairnessDialog(false)
	gameDetailStore.setGameResult(null)
	getWinnerData()
})
const getWinnerData = async () => {
	winnerData.value = {}
	const route = router.currentRoute.value
	const id = route.path?.split('/').pop()
	const result = await getGameDetailWinner({ slug: id })
	winnerData.value = result.data
}
const screenHeight = computed(() => {
	return (screeWidth.value / 1280) * 720
})

const screenWidth = computed(() => {
	return (height.value / 720) * 1280
})

const handleFullScreen = () => {
	console.log('fullScreen')
	if (screen_wrap.value) {
		fullscreen(screen_wrap.value)
	}
}

function fullscreen(element: any) {
	if (!document.fullscreenEnabled) {
		return Promise.reject(new Error('全屏模式被禁用'))
	}
	let result = null
	if (element.requestFullscreen) {
		result = element.requestFullscreen()
	} else if (element.mozRequestFullScreen) {
		result = element.mozRequestFullScreen()
	} else if (element.msRequestFullscreen) {
		result = element.msRequestFullscreen()
	} else if (element.webkitRequestFullscreen) {
		result = element.webkitRequestFullScreen()
	}
	return result || Promise.reject(new Error('不支持全屏'))
}

const handleMovie = (val: boolean) => {
	console.log('toMovie', val)
	isSelected.value = val
	const app_content = document.getElementById('app_content')
	if (val && app_content) {
		app_content.style.paddingTop = '0px'
	}
	if (!val && app_content) {
		app_content.style.paddingTop = '20px'
	}
}

const handleCollect = () => {
	console.log('collect')
}
const handleProvably = () => {
	console.log('showProvably')
	gameDetailStore.setFairnessDialog(true)
}
</script>
<style lang="scss" scoped>
.screen_wrap {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
</style>
